import 'package:flutter/material.dart';

class ButtonExtendPage extends StatelessWidget {
  const ButtonExtendPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("按钮演示页"), actions: <Widget>[
        IconButton(onPressed: () {}, icon: Icon(Icons.settings))
      ]),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              ElevatedButton(
                onPressed: () {
                  print("普通按钮");
                },
                child: Text("普通按钮"),
              ),
              SizedBox(
                width: 10,
              ),
              ElevatedButton(
                onPressed: () {
                  print("有颜色按钮");
                },
                child: Text("有颜色按钮"),
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.red),
                    foregroundColor: MaterialStateProperty.all(Colors.white)),
              ),
              SizedBox(
                width: 10,
              ),
              ElevatedButton(
                onPressed: () {
                  print("有阴影按钮");
                },
                child: Text("有阴影按钮"),
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.red),
                    foregroundColor: MaterialStateProperty.all(Colors.white),
                    elevation: MaterialStateProperty.all(20)),
              ),
              SizedBox(
                width: 10,
              ),
              ElevatedButton.icon(
                  onPressed: null,
                  icon: Icon(Icons.search),
                  label: Text("图标按钮"))
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                height: 50,
                width: 400,
                child: ElevatedButton(
                  onPressed: () {
                    print("设置宽高");
                  },
                  child: Text("设置宽高"),
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.red),
                      foregroundColor: MaterialStateProperty.all(Colors.white),
                      elevation: MaterialStateProperty.all(20)),
                ),
              )
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Expanded(
                  child: Container(
                margin: EdgeInsets.all(10),
                height: 60,
                child: ElevatedButton(
                  onPressed: () {
                    print("自适应按钮");
                  },
                  child: Text("自适应按钮"),
                ),
              ))
            ],
          ),
          SizedBox(
            height: 10,
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Container(
                  margin: EdgeInsets.all(10),
                  child: ElevatedButton.icon(

                      // onPressed: null,
                      onPressed: () {
                        print("图标按钮");
                      },
                      icon: Icon(Icons.search),
                      label: Text("图标按钮"))),
              ElevatedButton(
                child: Text("圆角按钮"),
                style: ButtonStyle(
                    backgroundColor: MaterialStateProperty.all(Colors.red),
                    foregroundColor: MaterialStateProperty.all(Colors.white),
                    elevation: MaterialStateProperty.all(20),
                    shape: MaterialStateProperty.all(RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(10)))),
                onPressed: () {
                  print("圆角按钮");
                },
              ),
              Container(
                height: 80,
                child: ElevatedButton(
                  child: Text("圆形按钮"),
                  style: ButtonStyle(
                      backgroundColor: MaterialStateProperty.all(Colors.red),
                      foregroundColor: MaterialStateProperty.all(Colors.white),
                      elevation: MaterialStateProperty.all(20),
                      shape: MaterialStateProperty.all(
                          CircleBorder(side: BorderSide(color: Colors.white)))),
                  onPressed: () {
                    print("圆形按钮");
                  },
                ),
              ),
              TextButton(
                  onPressed: () {
                    print("TextButton");
                  },
                  child: Text("TextButton按钮")),
            ],
          ),
          Row(
            children: <Widget>[
              OutlinedButton(
                  // textColor: Colors.red,
                  style: ButtonStyle(
                      foregroundColor: MaterialStateProperty.all(Colors.red),
                      side: MaterialStateProperty.all(
                          BorderSide(color: Colors.green))),
                  onPressed: () {
                    print("OutlinedButton");
                  },
                  child: Text("OutlinedButton按钮"))
            ],
          ),
          Row(
            children: <Widget>[
              Expanded(
                  child: Container(
                margin: EdgeInsets.all(10),
                height: 50,
                child: OutlineButton(
                    // textColor: Colors.red,
                    onPressed: () {
                      print("FlatButton");
                    },
                    child: Text("按钮")),
              ))
            ],
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              ButtonBar(
                children: <Widget>[
                  RaisedButton(
                    onPressed: () {
                      print("有颜色按钮");
                    },
                    child: Text("登录"),
                    color: Colors.blue,
                    textColor: Colors.white,
                  ),
                  RaisedButton(
                    onPressed: () {
                      print("有颜色按钮");
                    },
                    child: Text("注册"),
                    color: Colors.blue,
                    textColor: Colors.white,
                  ),
                  MyButton(
                    text: "自定义按钮",
                    height: 60,
                    width: 100,
                    pressed: () {
                      print("自定义按钮");
                    },
                  )
                ],
              ),
            ],
          )
        ],
      ),
    );
  }
}

class MyButton extends StatelessWidget {
  final text;
  final pressed;
  final double width;
  final double height;
  const MyButton(
      {this.text = '',
      this.pressed = null,
      this.width = 80.0,
      this.height = 30.0});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: this.height,
      width: this.width,
      child: RaisedButton(
        onPressed: this.pressed,
        child: Text(this.text),
      ),
    );
  }
}
